<template>
	<view>
		<quick-button></quick-button>
		<view class="top-img">
			<view class="bg" :style="{
				backgroundImage: getTopBgImage()
			}"></view>
		</view>

		<view class="bottom-container">
			<view class="price-card-view">
				<view class="price-card">
					<view class="title">{{ detailData.proName }}</view>
					<view class="content">
						<view class="price-text">
							<cn-money :money="Number.parseFloat(detailData.referencePrice)" :size="48"
								v-if="false"></cn-money>
						</view>
						<view class="right-text">377人已购</view>
					</view>
				</view>
			</view>

			<view class="flow-view">
				<view class="title">服务流程</view>
				<view class="content">
					<view class="item">
						<view class="index">1</view>
						<view class="text">预约</view>
					</view>
					<view class="arrow-view">
						<image src="../../static/detail_step_arrow.png"></image>
					</view>
					<view class="item">
						<view class="index">2</view>
						<view class="text">评估</view>
					</view>
					<view class="arrow-view">
						<image src="../../static/detail_step_arrow.png"></image>
					</view>
					<view class="item">
						<view class="index">3</view>
						<view class="text">医护上门</view>
					</view>
				</view>
			</view>

			<view class="service-content-view">
				<view class="title">服务内容</view>
				<view class="content">
					<view class="text">
						<view v-html="detailData.serviceContent"></view>
					</view>
					<!-- 					<view class="img">
						<image src="../../static/home_banner.png"></image>
					</view> -->
				</view>
			</view>

			<view class="service-content-view">
				<view class="title">适应人群</view>
				<view class="content">
					<view class="text">
						{{ detailData.userGroup }}
					</view>
				</view>
			</view>

			<view class="service-description-view">
				<view class="title">服务说明</view>
				<view class="content">
					<view class="text">
						<u-parse :content="detailData.proDes"></u-parse>
						<!-- <view v-html="detailData.proDes"></view> -->
					</view>
					<view class="table-view">
						<view class="table">
							<view class="table-row">
								<view class="table-title-cell">
									<view class="title-cell">取消订单情况</view>
								</view>
								<view class="table-title-cell">
									<view class="title-cell">退款扣费规则</view>
								</view>
							</view>
							<view class="table-row table-tb">
								<view class="table-cell">
									<view class="td-cell">医院接单后，医护未出发，用户可以免责取消预约服务</view>
								</view>
								<view class="table-cell">
									<view class="td-cell">全额退款，用户可自行取消订单</view>
								</view>
							</view>
							<view class="table-row table-tb">
								<view class="table-cell">
									<view class="td-cell">医护已出发且未开始服务，用户联系接单护士或客服确认取消订单</view>
								</view>
								<view class="table-cell">
									<view class="td-cell">需扣除订单中的护士路费，保险费，扣除上门服务费20%，耗材费全部退还</view>
								</view>
							</view>
							<view class="table-row table-tb">
								<view class="table-cell">
									<view class="td-cell">护士入户，服务开始后用户不可取消服务</view>
								</view>
								<view class="table-cell">
									<view class="td-cell">订单支付金额不予退还，视情况确定是否退耗材费</view>
								</view>
							</view>
							<view class="table-row table-tb">
								<view class="table-cell">
									<view class="td-cell">因不可抗力因素导致不能上门服务</view>
								</view>
								<view class="table-cell">
									<view class="td-cell">全额退款</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="tip-text">注：退款费用将在3-7个工作日内原路退回到支付账户中。</view>
			</view>
		</view>
		<view class="bottom-fixed-view">
			<view class="left">
				<image src="../../static/tab_custm.png" class="icon"></image>
				<view>客服</view>
			</view>
			<view class="right">
				<view class="btn1" @click="showAddToShoppingCartDialog" v-if="false">加入服务筐</view>
				<view class="btn2" @click="navToRiskNotification('book_now')">立即预约</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as userInfo from '../../common/api/userInfo.js';
import * as medicalProjects from '../../common/api/medicalProjects.js';
import * as serviceFrame from '../../common/api/serviceFrame.js';
import cnMoney from '../../components/cn-money/cn-money';
import { mapGetters } from 'vuex';
import { getToken } from "@/utils/auth.js"
export default {
	components: {
		cnMoney
	},
	data() {
		return {
			uid: '',
			type:'',
			hospitalUid: '',
			hospitalName: '',
			detailData: {},
			user: {},
			token: getToken(),
		};
	},
	onLoad(opt) {
		if (opt.uid) {
			this.uid = opt.uid;
		}
		if (opt.hospitalUid) {
			this.hospitalUid = opt.hospitalUid;
			this.hospitalName = opt.hospitalName;
			this.type = opt.type;
		}
		this.getData();
	},
	onShow() {
		this.getUserInfo();
		if (this.pageInfo?.hasRead) {
			this.addToShoppingCart();
			this.$nextTick(() => {
				this.$store.commit('page/setPageInfo', {});
			});
		}
	},
	computed: {
		...mapGetters({
			pageInfo: 'page/pageInfo'
		})
	},
	methods: {
		getData() {
			const param = {
				uid: this.uid
			};
			medicalProjects
				.queryById(param)
				.then((result) => {
					console.log("opt",result);
					this.detailData = result.data.data;
					this.setTitle();
				})
				.catch((error) => {
					console.log(error);
				});
		},
		setTitle() {
			const data = this.detailData || {};
			const title = data.proName || '';
			uni.setNavigationBarTitle({
				title: title
			});
		},
		getTopBgImage() {
			return `url('${this.detailData.picImg}')`;
		},

		navToRiskNotification(addType) {
			  console.log("token",this.token);
			if (!this.token) {
				uni.showToast({
					icon: 'none',
					title: '请重新登录!',
					delay: 1500
				})
				if(this.hospitalUid){
					  console.log("扫码登录");
					setTimeout(() => {
						uni.setStorageSync("nav_to_index_index", 1)
						uni.reLaunch({ url: '/sickbed/pages/feixiang/login/login?hospitalName=' + this.hospitalName+"&type="+this.type })
					}, 2000)
				}else{
					 console.log("正常");
					 setTimeout(() => {
					 	uni.setStorageSync("nav_to_index_index", 1)
					 	uni.reLaunch({ url: "/pages/index/index" })
					 }, 2000)
					 return
				}
	
			}
			uni.navigateTo({
				url: '/patientAppPages/pages/riskNotification/riskNotification?uid=' + this.uid + '&addType=' + addType+ '&hospitalUid=' +this.hospitalUid+"&type="+this.type 
			});
		},
		showAddToShoppingCartDialog() {
			uni.showModal({
				title: '确认加入服务框？',
				success: (res) => {
					if (res.confirm) {
						this.navToRiskNotification('add_cart');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		addToShoppingCart() {
			const param = {
				projectUseId: this.detailData.uid,
				wxOpenid: uni.getStorageSync('openid_key'),
				userName: this.user.nickname,
				projectName: this.detailData.proName,
				picImg: this.detailData.picImg,
				actualPrice: this.detailData.referencePrice,
				projectsDes: this.detailData.proDes,
				sketch: this.detailData.sketch,
				serviceContent: this.detailData.serviceContent,
				userGroup: this.detailData.userGroup,
				hospitalUid: '',
				hospitalName: ''
			};
			serviceFrame
				.insert(param)
				.then((result) => {
					uni.showToast({
						title: result.data.msg
					});
				})
				.catch((error) => {
					console.log(error);
				});
		},
		getUserInfo() {
			const openid = uni.getStorageSync('openid_key');
			const param = {
				openId: openid
			};
			userInfo
				.queryByOpenId(param)
				.then((result) => {
					this.user = Object.assign({}, result.data.data);
				})
				.catch((error) => {
					console.log(error);
				});
		}
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.top-img {
	width: 100%;
	height: 520rpx;

	.bg {
		width: 100%;
		height: 520rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		// background-image: url('../../static/home_banner.png');
	}
}

.bottom-container {
	padding: 0 20rpx;
	box-sizing: border-box;
	padding-bottom: 150rpx;

	.price-card-view {
		width: 100%;
		margin-top: -100rpx;

		.price-card {
			width: 100%;
			background: white;
			border-radius: 16rpx;
			padding: 34rpx;
			box-sizing: border-box;

			.title {
				font-size: 38rpx;
				color: #232323;
				font-weight: bold;
			}

			.content {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 28rpx;

				.price-text {
					display: flex;
					color: #ee5a2c;

					.price-num {
						font-size: 40rpx;
					}
				}

				.right-text {
					font-size: 26rpx;
					color: rgba(35, 35, 35, 0.4);
				}
			}
		}
	}

	.flow-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		background: white;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.title {
			color: #232323;
			font-size: 32rpx;
			font-weight: bold;
		}

		.content {
			width: 100%;
			display: flex;
			margin-top: 24rpx;
			justify-content: space-between;
			padding: 0 40rpx;
			box-sizing: border-box;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.index {
					width: 84rpx;
					height: 84rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #0bc5ae;
					color: white;
					font-size: 40rpx;
					font-weight: bold;
					border-radius: 50%;
				}

				.text {
					margin-top: 18rpx;
					color: rgba(35, 35, 35, 0.7);
					font-size: 30rpx;
				}
			}

			.arrow-view {
				height: 84rpx;
				display: flex;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}

	.service-content-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		background: white;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.title {
			color: #232323;
			font-size: 32rpx;
			font-weight: bold;
		}

		.content {
			width: 100%;
			display: flex;
			flex-direction: column;
			margin-top: 24rpx;

			.text {
				font-size: 30rpx;
				color: rgba(35, 35, 35, 0.8);
			}

			.img {
				image {
					width: 100%;
					height: 336rpx;
					margin-top: 36rpx;
				}
			}
		}
	}

	.service-description-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		background: white;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.title {
			color: #232323;
			font-size: 32rpx;
			font-weight: bold;
		}

		.content {
			width: 100%;
			display: flex;
			flex-direction: column;
			margin-top: 24rpx;

			.text {
				font-size: 30rpx;
				color: rgba(35, 35, 35, 0.8);
			}

			.table-view {
				width: 100%;
				margin-top: 40rpx;

				.table {
					width: 100%;
					display: table;
				}

				.table-title-cell {
					display: table-cell;
				}

				.title-cell {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #0bc5ae;
					padding-top: 10rpx;
					padding-bottom: 10rpx;
					color: white;
				}

				.td-cell {
					width: 100%;
					padding-top: 10rpx;
					padding-bottom: 10rpx;
					font-size: 26rpx;
					color: #707776;
				}

				.table-tb {
					background: #e4f5f3;
				}

				.table-row {
					display: table-row;
					padding: 10rpx;
					box-sizing: border-box;
				}

				.table-cell {
					display: table-cell;
					padding: 0rpx 10rpx;
					box-sizing: border-box;
				}
			}
		}

		.tip-text {
			margin-top: 24rpx;
			font-size: 20rpx;
			color: #e82323;
			width: 100%;
			display: flex;
			justify-content: center;
			font-weight: 400;
		}
	}
}

.bottom-fixed-view {
	position: fixed;
	height: 120rpx;
	width: 100%;
	background: white;
	bottom: 0;
	border-top: solid 2rpx #f2f2f2;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	box-sizing: border-box;
	justify-content: space-between;

	.left {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-self: center;
		color: rgba(35, 35, 35, 0.7);
		font-size: 20rpx;

		.icon {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.right {
		display: flex;
		align-items: center;

		.btn1 {
			width: 226rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: solid 2rpx #0bc5ae;
			border-radius: 44rpx;
			color: #0bc5ae;
			font-size: 30rpx;
		}

		.btn2 {
			width: 226rpx;
			height: 88rpx;
			background: #0bc5ae;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 44rpx;
			margin-left: 16rpx;
			color: white;
			font-size: 30rpx;
		}
	}
}
</style>
